<template>
  <div>
    <van-nav-bar
        class="add-nav-bg"
        :title="title"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            :disabled="type !== 'add'"
            v-model="dbName"
            name="dbName"
            :label="$t('databaseManagement.t10')"
            :placeholder="$t('databaseManagement.t10')"
            :rules="[{ required: true, message: $t('databaseManagement.t11') }]"
        />
        <van-field
            v-model="dbAlias"
            name="dbAlias"
            :label="$t('databaseManagement.t8')"
            :placeholder="$t('databaseManagement.t8')"
            :rules="[{ required: true, message: $t('databaseManagement.t9') }]"
        />
        <van-field
            v-if="type === 'add'"
            v-model="dbPath"
            name="dbPath"
            :label="$t('databaseManagement.t12')"
            :placeholder="$t('databaseManagement.t12')"
        />
        <van-field
            v-model="describe"
            name="describe"
            rows="2"
            autosize
            :label="$t('databaseManagement.t14')"
            type="textarea"
            maxlength="50"
            :placeholder="$t('databaseManagement.t15')"
            show-word-limit
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block class="add-btn" native-type="submit">
          {{ $t('databaseManagement.t16') }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Field, CellGroup, Button, NavBar } from 'vant';
import {addDatabase, getDatabase, saveDatabase} from "../../api/database";

export default {
  components: {
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup
  },

  data () {
    return {
      type: '',
      title: '',
      dbName: '',
      dbAlias: '',
      dbPath: '', // 选填
      describe: '' // 选填
    }
  },
  created() {
    this.type = this.$route.query.type
    this.title = this.type === 'add' ? this.$t('databaseManagement.t7') : this.$t('databaseManagement.t4')
    this.type === 'modify' && this.getUserInfo()
  },

  methods: {
    onSubmit () {
      if (this.type === 'add') {
        const params = {
          dbName: this.dbName,
          dbAlias: this.dbAlias,
          dbPath: this.dbPath,
          note: this.describe,
        }
        let self = this
        addDatabase(self, params).then(response => {
          console.log(response.data)
        }).catch(function (error) {
          // console.log(error)
          return error
        })
        return;
      }
      let self = this
      const params = {
        dbName: this.dbName,
        dbAlias: this.dbAlias,
        dbPath: this.dbPath,
        note: this.describe,
      }
      saveDatabase(self, params).then(response => {
        console.log(response.data)
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    getUserInfo () {
      let self = this
      getDatabase(self, { dbName: this.$route.query.dbName }).then(response => {
        console.log(response.data)
        this.dbName = this.$route.query.dbName
        this.dbAlias = response.data.body.dbAlias
        this.dbPath = response.data.body.dbPath
        this.describe = response.data.body.note
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    onClickLeft () {
      history.back();
    }
  }
};
</script>

<style lang="less">
.add {
  &-nav-bg {
    margin-bottom: 15px;
    //background: #4293F4;
    box-shadow: 0 0 25px #cac6c6;
  }

  &-btn {
    color: #fff;
    background-color: #4293F4;
    border: 1px solid #4293F4;
  }
}
</style>
